<title>Chartjs</title>

<link rel="stylesheet" href="/css/examples/charts/chartjs.css">

<div class=" page animation-fade">
    <div class="page-header">
        <h1 class="page-title">Chart.js 图表</h1>
        <div class="page-header-actions">
            <a class="btn btn-default btn-outline btn-round" href="http://www.chartjs.org" target="_blank">
                <i class="icon fa-home" aria-hidden="true"></i> <span class="hidden-xs">官网</span></a>
            <a class="btn btn-default btn-outline btn-round" href="http://www.bootcss.com/p/chart.js/docs/" target="_blank">
                <i class="icon fa-language" aria-hidden="true"></i> <span class="hidden-xs">中文文档</span></a>
        </div>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">曲线图</h4>
                            <div class="example text-center">
                                <canvas id="exampleChartjsLine" height="300" width="450"></canvas>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">柱状图</h4>
                            <div class="example text-center">
                                <canvas id="exampleChartjsBar" height="300" width="450"></canvas>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-md-block"></div>
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">雷达图</h4>
                            <div class="example text-center max-width">
                                <canvas id="exampleChartjsRadar" height="250"></canvas>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap margin-lg-0">
                            <h4 class="example-title">极地区域图</h4>
                            <div class="example text-center max-width">
                                <canvas id="exampleChartjsPloarArea" height="250"></canvas>
                            </div>
                        </div>

                    </div>
                    <div class="clearfix visible-md-block"></div>
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap margin-md-0">
                            <h4 class="example-title">饼状图</h4>
                            <div class="example text-center max-width">
                                <canvas id="exampleChartjsPie" height="250"></canvas>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-6 col-lg-4">

                        <div class="example-wrap">
                            <h4 class="example-title">环形图</h4>
                            <div class="example text-center max-width">
                                <canvas id="exampleChartjsDonut" height="250"></canvas>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<script src="/vendor/chart-js/Chart.js" data-name="Chart"></script>
<script src="/js/examples/charts/chartjs.js" data-deps="Chart"></script>
